{% extends "base.html" %}
{% block header_js %}
<script type="text/javascript">
function deleteHost(id){
    var ret =confirm("确定要删除主机吗?");
    if(ret == false){
        return false;
    }
    $.getJSON("/host/remove/?id="+ id, function(data){
        if(data['flag'] == "SUCC"){
            alert("删除主机成功!");
            $("#host_" + id).empty();
        }else{
            alert("删除主机失败");
        }
    });
}
</script>
{% endblock %}

<body>
{% block header %}
{% include "host-menu.html" %}
{% endblock %}

{% block content %}
<div class="wrap">
	<div class="wrap_right tree">
	{% autoescape off %}
	    {{ tree }}
	{% endautoescape %}
	</div>

	<div class="wrap_left right">
    	<div class="shenqing1">
	        <h5 style="float:left;width:96%;margin-bottom:10px;">主机列表</h5>
		    <form method="post" action="/host/search/" >
			        <input type="text" name="key" class="word_in"/>
			   	    <input type="submit" value="搜索" class="btn_search"/>
	   	  	</form>
        {% if idcs %}
		<div class="tab_nav">
            <strong class="textalingR" style="float:left">机房：</strong>
            {% for idc in idcs %}
			<a href="/host/idc/?id={{idc.id}}">{{ idc }}</a>
            {% endfor %}
		</div>
        {% endif %}

		<a href="/host/add/" class="new_zeng" >新增主机</a>
   	  	</div>
		<div class="biaoge">
		<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="table2">
			<tr>
				<th width="15%">主机</th>
				<th width="10%">所属机房</th>
				<th width="10%">CPU</th>
				<th width="10%">负载</th>
				<th width="10%">硬盘</th>
				<th width="10%">内存</th>
				<th width="12%">启动时间</th>
				<th width="5%">状态</th>
				<th width="8%">操作</th>
			</tr>
            {% for host in host_list %}
			<tr class="{% cycle  g1 g2 %} {% if host.status == 'F'%} error {% endif %}" id="host_{{host.id}}">
				<td class="td_left"><a href="/host/detail?id={{host.id}}">{{ host.ip }}</a></td>
				<td class="td_mid">{{host.idc}}</td>
				<td>{{host.r_cpu_usage}}</td>
				<td>{{host.r_load}}</td>
				<td>{{host.r_disk}}/{{host.r_disk_total}}(G)</td>
				<td>{{host.r_mem_usage}}/{{host.r_mem_total}}(M)</td>
				<td>{{host.r_uptime|date:"Y-m-d H:i:s"}}</td>
				<td>
                {% if host.status == 'T' %}
                    <img src="/static/img/ok-status.gif"width="16" height="16" alt="" /></td>
                {% else%}
                    <img src="/static/img/error-status.gif"width="16" height="16" alt="" /></td>
                {% endif %}
				<td>
				<a href="/host/modify/?id={{host.id}}">
				<img src="/static/img/edit-icon.gif" alt="edit" width="16" height="16" border="0" />
				</a>
				<a href="/host/clone/?id={{host.id}}">
				<img src="/static/img/save-icon.gif" alt="save" width="16" height="16" border="0" />
				</a>
	            <a href="javascript:deleteHost({{host.id}})">
				<img src="/static/img/error-status.gif" alt="save" width="16" height="16" border="0" />
				</a>

				</td>
			</tr>
            {% endfor %}
			</table>
		<div class="page_w">
			<div class="page_font">总共{{count}}条记录</div>
			<div class="page_r">
			    <ul>
				    <li>
					    <select class="frist" onchange="javascript:window.location.href=this.options[this.selectedIndex].value;">
					    {% for p in page_list %}
					    	<option value="/host?page={{p}}">第{{p}}页</option>
					    {% endfor %}
					    </select>
				    </li>
				    <li>每页{{num}}条,共{{page_num}}页</li>  
				    <li><a href="/host?page={{page_num}}" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><ins>末页</ins><img src="/static/img/new/page_ico4.gif" /></span></a></li>
				    <li><a href="/host?page={{page_down}}" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><ins>下一页</ins><img src="/static/img/new/page_ico3.gif"/></span></a></li>
				    <li><a href="/host?page={{page_up}}" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><img src="/static/img/new/page_ico2.gif"/><ins>上一页</ins></span></a></li>
				    <li><a href="/host" class="page_btn" onMouseDown="this.className='page_btn_d'"><span><img src="/static/img/new/page_ico1.gif"/><ins>首页</ins></span></a></li>
			    </ul>
			</div>
	    </div>
	</div>
</div>
{% endblock %}
</body>
</html>
